<template>
  <div class="page-wrapper">
    <h-header></h-header>
    <div class="content">
      <ul class="list">
        <li v-for="item in menuList" :key="item" class="lits_li">
          <div v-if="item.hash.funcid=='220000'">
            <el-badge :value="value" :max="99">
              <img :src="item.hash.img_url" @click="goPage(item)">
            </el-badge>
          </div>
          <div v-else>
            <img :src="item.hash.img_url" @click="goPage(item)">
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import HHeader from '~/components/common/header/Mheader.vue';

export default {
  data() {
    return {
      ts: this.newStore(),
      menuList: [],
      value1: '0',
      value2: '0',
      isClick3: false,
      isClick4: false,
      isClick5: false,
      tzlxArr: [{
        tzid: '1',
        tzname: '合同到期',
        isshow: '1',
        num: '0',
      }, {
        tzid: '2',
        tzname: '租金未缴',
        isshow: '1',
        num: '0',
      }, {
        tzid: '3',
        tzname: '房产待审',
        isshow: '1',
        num: '0',
      }, {
        tzid: '4',
        tzname: '租金待审',
        isshow: '1',
        num: '0',
      }, {
        tzid: '5',
        tzname: '维修待审',
        isshow: '1',
        num: '0',
      }],
    };
  },
  computed: {
    value() {
      let a = 0;
      for (let i = 0; i < this.tzlxArr.length; i += 1) {
        a += Number(this.tzlxArr[i].num);
      }
      return a;
    },
  },
  components: {
    HHeader,
  },
  created() {
    this.gettztx();
    this.getMenu();
    this.gettzlx();
  },
  methods: {
    goPage(item) {
      this.$router.push({
        path: item.hash.load_page,
        query: { funcid: item.hash.funcid },
      });
    },
    gettzlx() {
      const req1 = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BF829FBCD1B3C6C87ABE555654F5B8C21',
        token: localStorage.getItem('token'),
        funcid: '206000',
      };
      const req2 = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BF829FBCD1B3C6C87ABE555654F5B8C21',
        token: localStorage.getItem('token'),
        funcid: '207000',
      };
      const req3 = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BF829FBCD1B3C6C87ABE555654F5B8C21',
        token: localStorage.getItem('token'),
        funcid: '205000',
      };
      const req4 = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BF829FBCD1B3C6C87ABE555654F5B8C21',
        token: localStorage.getItem('token'),
        funcid: '208100',
      };
      const req5 = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0BF829FBCD1B3C6C87ABE555654F5B8C21',
        token: localStorage.getItem('token'),
        funcid: '208200',
      };

      this.spost(this.ts, '/mainservlet', req1).then((ts) => {
        if (Number(ts.d.data.operation1[0].hash.cou) == 0) {
          // const a = {tzid: '1',tzname: '合同到期'};
          // this.tzlxArr.push(a);
          this.tzlxArr[0].isshow = '0';
        } else {
          const req11 = {
            handle: 'B60B3613AF0CF4C4E6C98404390CEC37B399C667EA8875886E7A2C907495FD5C',
            token: localStorage.getItem('token'),
            start: '0',
            limit: '1',
            isread: '0',
          };
          this.spost(this.ts, '/mainservlet', req11).then((ts11) => {
            this.tzlxArr[0].num = ts11.d.data.operation2[0].hash.allrs;
          });
        }
      });
      this.spost(this.ts, '/mainservlet', req2).then((ts) => {
        if (Number(ts.d.data.operation1[0].hash.cou) == 0) {
          this.tzlxArr[1].isshow = '0';
        } else {
          const req22 = {
            handle: 'B60B3613AF0CF4C4E6C98404390CEC37B399C667EA887588FA6371B2CCFE5536',
            token: localStorage.getItem('token'),
            start: '0',
            limit: '1',
            isread: '0',
          };
          this.spost(this.ts, '/mainservlet', req22).then((ts22) => {
            this.tzlxArr[1].num = ts22.d.data.operation2[0].hash.allrs;
          });
        }
      });
      this.spost(this.ts, '/mainservlet', req3).then((ts) => {
        if (Number(ts.d.data.operation1[0].hash.cou) == 0) {
          this.tzlxArr[2].isshow = '0';
        } else {
          const req33 = {
            handle: 'B60B3613AF0CF4C4E6C98404390CEC37B399C667EA887588E30DC13DD34D6967',
            token: localStorage.getItem('token'),
            start: '0',
            limit: '1',
            isread: '0',
          };
          this.spost(this.ts, '/mainservlet', req33).then((ts33) => {
            this.tzlxArr[2].num = ts33.d.data.operation2[0].hash.allrs;
          });
        }
      });
      this.spost(this.ts, '/mainservlet', req4).then((ts) => {
        if (Number(ts.d.data.operation1[0].hash.cou) == 0) {
          this.tzlxArr[3].isshow = '0';
        } else {
          const req44 = {
            handle: 'B60B3613AF0CF4C4E6C98404390CEC37B399C667EA887588A4814C41E1464FCC',
            token: localStorage.getItem('token'),
            start: '0',
            limit: '1',
            isread: '0',
          };
          this.spost(this.ts, '/mainservlet', req44).then((ts44) => {
            this.tzlxArr[3].num = ts44.d.data.operation2[0].hash.allrs;
          });
        }
      });
      this.spost(this.ts, '/mainservlet', req5).then((ts) => {
        if (Number(ts.d.data.operation1[0].hash.cou) == 0) {
          this.tzlxArr[4].isshow = '0';
        } else {
          const req55 = {
            handle: 'B60B3613AF0CF4C4E6C98404390CEC37B399C667EA88758854F29B8E2A382332',
            token: localStorage.getItem('token'),
            start: '0',
            limit: '1',
            isread: '0',
          };
          this.spost(this.ts, '/mainservlet', req55).then((ts55) => {
            this.tzlxArr[4].num = ts55.d.data.operation2[0].hash.allrs;
          });
        }
      });
    },
    gettztx() {
      const req = {
        handle: 'B60B3613AF0CF4C4E6C98404390CEC37B7AB287AFEC45971CD3A43E9777C4E90',
        token: localStorage.getItem('token'),
        start: 1,
        limit: 10,
        isread: 0,
      };
      const req2 = {
        handle: 'B60B3613AF0CF4C4E6C98404390CEC37B399C667EA887588CD3A43E9777C4E90',
        token: localStorage.getItem('token'),
        start: 1,
        limit: 10,
        isread: 0,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.value1 = ts.d.data.operation2[0].hash.allrs;
      });
      this.spost(this.ts, '/mainservlet', req2).then((ts) => {
        this.value2 = ts.d.data.operation2[0].hash.allrs;
      });
    },
    showError() {
      this.$message('暂无此功能！');
    },
    getMenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B078C37EB4CBA2359',
        token: localStorage.getItem('token'),
        supid: '200000',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.menuList = ts.d.data.operation1;
      });
    },
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.page-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  overflow: auto;

  .content {
    width: 1200px;
    margin: 0 auto;

    .list {
      margin-top: 40px;
      width: 100%;
    }
  }
}

.lits_li {
  width: 25%;
  float: left;
  margin: 30px auto;

  img {
    cursor: pointer;
  }
}
</style>
